<template>
  <div class="lipagination">
    <el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page.sync="currentPage1"
    :page-size="10"
    :pager-count="5"
    layout="total, prev, pager, next"
    :total="total" hide-on-single-page>
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'ProlistPagination',
  props: {
    proinfo: Array
  },
  methods: {
    handleSizeChange (val) {
      //  console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.currentPage1 = val
      this.$parent.handleearch(val)
    }
  },
  data () {
    return {
      currentPage1: 1,
      total: null
    }
  },
  created () {
    // this.currentPage1 = Number(localStorage.getItem('prolistPagination')) || 1
  },
  beforeUpdate () {
    // localStorage.setItem('prolistPagination', this.currentPage1)
  }
}
</script>
<style lang="stylus">
@import '~styles/varibles.styl'
.lipagination {
  padding: 20px 0 5px;
  height: 57px;
}
.lipagination .el-pagination {
  text-align: right;
}
.lipagination .el-pagination .el-pagination__total {
  float: left;
  color: #333333;
}
.lipagination .el-pagination.is-background .btn-next, .lipagination .el-pagination.is-background .btn-prev, .lipagination .el-pagination.is-background .el-pager li {
  margin: 0 5px;
  background-color: #ffffff;
  color: #888;
  font-weight: 500;
  font-size: 12px;
  min-width: 30px;
  border-radius: 2px;
  border: 1px solid #E8E8E8;
  box-sizing: border-box;
  line-height: 26px;
}
.lipagination .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: $baseColor;
  color: #FFF;
  border-color: $baseColor;
}
</style>
